<!DOCTYPE HTML>
<html>
<head>
    {include file="common:meta"}
</head>
<body>
<div class="page-container">
    <div class=" float-e-margins">
        <div class="ibox-content">
            <div class="tabs-container">
                <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true">规则列表</a>
                    </li>
                    <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">添加规则</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class=" tab-pane active" id="tab-1">
                        <form action="" class="form-inline" data-url="">
                            <div class="form-group">
                                <label class="control-label" for="key">选项:</label>
                                <select id="key" class="form-control" name="key">
                                    <option value="">请选择</option>
                                    <option value="id">ID</option>
                                    <option value="day_number">签到天数</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="control-label" for="value">输入:</label>
                                <input class="form-control" id="value" type="text" name="value">
                            </div>
                            <button type="button" class="btn btn-primary" id="eventQuery">查询</button>
                            <button type="button" onclick="location.replace(location.href);" class="btn btn-success ">刷新</button>
                        </form>
                        <table id="tb_departments" ></table>
                    </div>
                    <div class=" tab-pane" id="tab-2">
                        <div class="ibox-content">
                            <form class="form-horizontal" enctype="multipart/form-data" id="form" >
                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="day_number">
                                    <span class="c-red">*</span>签到天数:
                                </label>
                                <div class="col-md-2 col-sm-10">
                                    <input type="number" class="form-control" id="day_number"  name="day_number">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="gift-type">
                                    <span class="c-red">*</span>奖励类型：
                                </label>
                                <div class="col-md-2 col-sm-10">
                                    <select class="form-control" name="reward_type" id="gift-type">
                                        {volist name='return' id='gift'}
                                        <option value="{$gift['k']}">{$gift['v']}</option>
                                        {/volist}
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="typed-id">
                                    <span class="c-red">*</span>奖品名称：
                                </label>
                                <div class="col-md-2 col-sm-10">
                                    <select class="form-control" name="reward_id" id="typed-id">

                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="reward_img">
                                    <span class="c-red">*</span>礼物图片:
                                </label>
                                <div class="col-md-2 col-sm-10">
                                    <textarea name="reward_img" id="reward_img" cols="100" rows="4"></textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="reward_number">
                                    <span class="c-red">*</span>奖品数量：
                                </label>
                                <div class="col-md-2 col-sm-10">
                                    <input type="number" name="reward_number" id="reward_number">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="reward_double">
                                    <span class="c-red">*</span>奖品倍数：
                                </label>
                                <div class="col-md-2 col-sm-10">
                                    <input type="number" name="reward_double" id="reward_double">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="status">
                                    <span class="c-red">*</span>状态：
                                </label>
                                <div class="col-md-2 col-sm-10">
                                    <div class="radio i-checks">
                                        <label><input type="radio"  name="status" value="0"> <i></i> 下架</label>
                                        <label><input type="radio" name="status"  value="1"> <i></i> 上架</label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
                                    <button class="btn btn-primary" type="button" id="btn-submit">添加
                                    </button>
                                </div>
                            </div>
                        </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{include file="common:footer"}
<script>
    $(document).ready(function () {
        initTable();
    });

    function initTable() {
        $('#tb_departments').bootstrapTable({
            url: '/SignRuleIndexData',         //请求后台的URL（*）
            dataField: "data",
            method: 'get',                      //请求方式（*）
            striped: true,                      //是否显示行间隔色
            cache: true,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            queryParams: queryParams,//传递参数（*）
            showToggle: true,
            showRefresh: true,
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            showColumns: true,                  //是否显示所有的列
            showPaginationSwitch: true,
            minimumCountColumns: 2,             //最少允许的列数

            columns: [{
                field: 'id',
                title: 'ID',
                sortable: true
            },{
                field: 'day_number',
                title: '签到天数'
            }, {
                field: 'reward_type',
                title: '奖励类型',
                formatter: function (value, row, index) {
                    window.arr=new Array();   //定义一个全局变量
                    arr[1]="金币";arr[2]="钻石";arr[3]="座驾";arr[4]="礼物";arr[5]="喇叭";arr[6]="生肖卡";arr[7]="自定义";
                  //  var len = arr.length;
//                    if(row.reward_type > len){
//                        return "未知";
//                    }
                    return arr[row.reward_type] != null ? arr[row.reward_type] : '未知';
                   // console.log(arr[row.reward_type]);
                }
            }, {
                field: 'reward_id',
                title: '奖品名称',
                // formatter: function (value, row, index) {
                //     if(row.reward_id == null || arr[row.reward_type] == null){
                //         return '钻石或自定义奖品';
                //     }else{
                //         getGiftName();
                //      //   return row.reward_id;
                //     }
                // }
            },  {
                field: 'reward_img',
                title: '礼物图片',
                formatter: function (value, row, index) {
                    return '<img  src="' + row.reward_img + '" class="img-responsive" width="6%">';
                }
            },{
                field: 'custom',
                title: '自定义内容',
            },{
                field: 'reward_number',
                title: '奖励数量',
            }, {
                field: 'reward_double',
                title: '奖励倍数',
            }, {
                field: 'Button',
                title: '操作',
                events: operateEvents,
                formatter: operateFormatter
            }]
        });
    }

    //得到查询的参数
    function queryParams(params) {
        params.offset = params.offset / params.limit + 1;
        params.key = $('#key').val();
        params.value = $('#value').val();
        console.log(JSON.stringify(params));
        return params;
    }

    function operateFormatter(value, row, index) {
        var status = row.status === 1 ? '下架规则' : '上架规则';
        if(row.reward_type == 7)
            return [
                '<button type="button"  class="SetContent btn-danger btn-sm" style="margin-right:15px;">自定义内容</button>',
                '<button type="button"  class="TableEdit btn-danger btn-sm" style="margin-right:15px;">修改规则</button>',
                '<button type="button"  class="TableChange btn btn-danger btn-sm" style="margin-right:15px;">' + status + '</button>'
            ].join('');
        else
            return [
                '<button type="button"  class="TableEdit btn-danger btn-sm" style="margin-right:15px;">修改规则</button>',
                '<button type="button"  class="TableChange btn btn-danger btn-sm" style="margin-right:15px;">' + status + '</button>'
            ].join('');
    }

    window.operateEvents = {
        'click .TableChange': function (e, value, row, index) {
            changeStatus('SignRuleChangeStatus', row, this);
        },
        //修改规则
        'click .TableEdit': function (e, value, row, index) {
            layer.open({
                type: 2,
                title: ['修改规则','font-size:18px;font-family:宋体;font-weight:700;'],
                shadeClose: true,
                shade: false,
                maxmin: true, //开启最大化最小化按钮
                area: ['800px', '600px'],
                content:"/SignRuleEdit?id=" + row.id,
                offset:'auto',
                scrollbar:false,
                end: function () {
                    location.reload();
                }
            });
        },
        //自定义内容
        'click .SetContent': function (e, value, row, index) {
//            var type=row.reward_type; //获取类型
//            var route = '';  //声明路由
//            switch (type)
//            {
//                case 3:
//                    route="SignRuleVehicleIndex";
//                    break;
//                case 4:
//                    route="SignRuleVehicleIndex";
//                    break;
//                case 5:
//                    route="SignRuleVehicleIndex";
//                    break;
//                case 6:
//                    route="SignRuleVehicleIndex";
//                    break;
//                case 7:
//                    route="SignRuleVehicleIndex";
//                    break;
//                case 8:
//                    route="SignRuleVehicleIndex";
//                    break;
//            }
            console.log(row.custom);
            layer.open({
                type: 2,
                title: ['自定义内容','font-size:18px;font-family:宋体;font-weight:700;'],
                shadeClose: true,
                shade: false,
                maxmin: true, //开启最大化最小化按钮
                area: ['800px', '600px'],
                content:"/SignRuleVehicleIndex?custom="+row.custom,
                offset:'auto',
                scrollbar:false
            });
        }
    };
    //上架下架
    function changeStatus(url, row, obj) {
        var status = row.status === 1 ? '上架规则' : '下架规则';
        row.status === 1 ? row.status = 0 : row.status = 1;
        $.ajax({
            type: 'get',
            dataType: 'json',
            url: url,
            data: {'id': row.id},
            success: function (re) {
                if (re.code === 200) {
                    layer.msg(re.msg, {icon: 1, time: 2000});
                    $(obj).html(status);
                } else {
                    layer.alert(re.msg);
                }
            },
            error: function (data) {
                console.log(data.msg);
            }
        });
    }

    //二级联动
    $(document).ready(function(e) {
        ChangeType();
        $("#gift-type").change(function(){
            ChangeType();
        });
        $("#typed-id").change(function(){
            ChangeGift();
        })
    });
    function ChangeType(){
        var giftType = $("#gift-type").val();
        console.log(giftType);
        $.ajax({
            async:false,
            url:"/SignRuleGiftName",
            data:{giftType:giftType},
            type:"post",
            dataType:"TEXT",
            success:function(res){
                //  var hang = data.split("|");
                var data = JSON.parse(res);

                console.log(data);
                var str = "<option value='' selected>--请选择--</option>";
                if(data != null){
                    for(var i in data){
                        str+= "<option value="+data[i]['id']+">"+data[i]['gift_name']+"</option>";
                    }
                    // for(var i=0;i<data.length;i++){
                    //     str += "<option value="+data[i].id+">"+data[i].gift_name+"</option>";
                    // }
                }

                $("#typed-id").html(str);
            }
        });
    }
    function ChangeGift(){
        var giftId = $("#typed-id").val();
        console.log(giftId);
    }

   //添加规则
    $('#btn-submit').click(function(){
            $.ajax({
                type:'post',
                url:"/SignRuleAdd",
                async:true,
                data:$('#form').serialize(),
                dataType:'json',
                success:function(result){
                    console.log(result.data);
                    console.log(result.res);
                    if(result.code == 100){
                        //   parent.layer.close(index);//关闭当前页
                        layer.msg(result.msg,{
                            icon:1,
                            time:1000
                        });
                        window.location.reload();
                    }
                    else{
                        layer.msg(result.msg,{
                            icon:2,
                            time:1000
                        });
                    }
                },
                error:function(err){
                    layer.msg('服务器开小差了！',{
                        time:1500
                    });
                }
            });
    });


    // 搜索按钮触发事件
    $(function () {
        $("#eventQuery").click(function () {
            $('#tb_departments').bootstrapTable(('refresh'));	// 很重要的一步，刷新url！
        });
    });
</script>
</body>
</html>